<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: #f5f5f5;
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			.wbpro-side{
				width: 240px;
				/* height: 600px; */
				background-color: #fff;
				margin: 50px 0px 0px 50px;
				padding: 10px 15px;
			}
			.wbpro-side .wbpro-side-head{
				height: 40px;
				/* background-color: antiquewhite; */
				display: flex;
				align-items: center;
				cursor: pointer;
				border-bottom: 1px solid #f9f9f9;
			}
			.wbpro-side .wbpro-side-head span.tile{
				flex-grow: 1;
				font-size: 14px;
			}
			.wbpro-side .wbpro-side-head span.sx{
				font-size: 12px;
				color: #939393;
				margin-left: 5px;
			}
			.wbpro-side .wbpro-side-panel{
				height: 40px;
				font-size: 12px;
				border-bottom: 1px solid #f9f9f9;
				display: flex;
			}
			.wbpro-side-panel a{
				width: 100%;
				display: flex;
				/* background-color: red; */
				align-items: center;
			}
			.wbpro-side-panel a span.title{
				flex-grow: 1;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.wbpro-side-panel a span.icon{
				font-size: 16px;
				font-weight: bold;
				color: #ff9406;
				margin-right: 10px;
			}
			.wbpro-side-panel a span.num{
				color: #939393;
				flex-shrink: 0;
			}
			.wbpro-side-panel a span.mark{
				color: #fff;
				padding: 2px 4px;
				border-radius: 5px;
				margin-left: 5px;
			}
			.wbpro-side-panel:nth-child(-n+4) a span.icon{
				color: red;
			}
			.bg1{
				background-color: #FF9406;
			}
			.bg2{
				background-color: pink;
			}
			.bg3{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="wbpro-side">
			<div class="wbpro-side-head">
				<span class="tile">微博热搜</span>
				<span class="sx">点击刷新</span>
			</div>
			
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">1</span>
					<span class="title">新的赶考之路卷常出常新新的赶考之路卷常出常新新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg1">新</span>
				</a>
			</div>
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">2</span>
					<span class="title">新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg3">新</span>
				</a>
			</div>
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">3</span>
					<span class="title">新的赶考之路卷常出常新新的赶考之路卷常出常新新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg2">新</span>
				</a>
			</div>
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">4</span>
					<span class="title">新的赶考之路卷常出常新新的赶考之路卷常出常新新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg1">新</span>
				</a>
			</div>
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">5</span>
					<span class="title">新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg2">新</span>
				</a>
			</div>
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">6</span>
					<span class="title">新的赶考之路卷常出常新新的赶考之路卷常出常新新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg3">新</span>
				</a>
			</div>
			<div class="wbpro-side-panel">
				<a href="">
					<span class="icon">7</span>
					<span class="title">新的赶考之路卷常出常新</span>
					<span class="num">246万</span>
					<span class="mark bg1">新</span>
				</a>
			</div>
		</div>
	</body>
</html>
